<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>dialog</title>
	</head>
	<body>
		<!-- 定义对话框，比如提示框 -->

		<button id="openDialogBtn">Open Dialog</button>

		<dialog id="myDialog">
			<h2>Dialog Title</h2>
			<p>This is the content of the dialog.</p>
			<button id="closeDialogBtn">Close</button>
		</dialog>

		<script>
			let openDialogBtn = document.getElementById('openDialogBtn')
			let myDialog = document.getElementById('myDialog')
			let closeDialogBtn = document.getElementById('closeDialogBtn')

			openDialogBtn.addEventListener('click', function () {
				myDialog.showModal()
			})

			closeDialogBtn.addEventListener('click', function () {
				myDialog.close()
			})
		</script>
	</body>
</html>
